<template>
	<div>
			<smpPanel>
				<el-form :inline="false" label-width="130px" size="mini" ref="form" :model="form">
					<el-row>
						<el-col :span="22">
							<el-col :span="8">
								<el-form-item label="需求编号:">
									<!-- <el-input v-model="query.body.qmsNo" placeholder="需求号"></el-input> -->
									
									<el-select v-model="query.body.qmsNo" style="width: 100%" clearable filterable remote
										reserve-keyword placeholder="请输入需求编号或名称"
										:loading="qmsLoading"  @change="getList" :remote-method="getRequirementList" >
										<el-option v-for="item in requirelist" :key="item.qmsNo" :label="item.qmsNo"
											:value="item.qmsNo">
											<span style="float: left;margin-left: 3px;">{{ item.qmsNo }}</span>
											<span style="float: right;margin-right: 3px;">{{ item.qmsName }}</span>
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<!-- <el-form-item label="批次号:">
									 <el-input v-model="query.body.batchNum" placeholder="需求名称" @keyup.enter.native="getList"></el-input> 
									<el-select v-model="query.body.batchNum"  clearable style="width: 100%" placeholder="批次号"  @change="getList">
				
										<el-option v-for="item in dict('SMP0010')" :key="item.itemCode"
											:label="item.itemName" :value="item.itemCode">
										</el-option>
									</el-select>
								</el-form-item> -->
								
								
								<el-form-item label="开发人员:" prop="dealUser">
									
									<el-select v-model="query.body.dealUser" style="width: 100%"  
										placeholder="开发人员" @change="getList" clearable>
										<el-option v-for="item in devUserList" :key="item.userName" :label="item.userChineseName"
											:value="item.userName">
											<!-- <span style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
											<span style="float: right;margin-right: 3px;">{{ item.department }}</span> -->
										</el-option>
									</el-select>
								</el-form-item>
								
							</el-col>
							<el-col :span="8">
								<el-form-item label="主系统:">
									<el-select v-model="query.body.mainSystemNo" clearable  style="width: 100%" filterable remote
										reserve-keyword placeholder="主系统" :remote-method="getsystems"  @change="getList">
										<el-option v-for="item in systemList" :key="item.systemNo"
											:label="item.systemName" :value="item.systemNo">
											<span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
											<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span>
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="申请日期(开始):" >
									<el-date-picker style="width: 100%"clearable v-model="query.body.applyTime"  @change="getList"
										value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期">
									</el-date-picker>

								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="申请日期(结束):">
									<el-date-picker style="width: 100%" clearable v-model="query.body.applyTimeEnd" type="date"  @change="getList"
										value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="需求状态:" :label-col="{ span: 5 }" :wrapper-col="{ span: 16  }">
									<el-select v-model="query.body.status" clearable style="width: 100%" placeholder="需求状态"  @change="getList">

										<el-option v-for="item in dict('SMP0007')" :key="item.itemCode"
											:label="item.itemName" :value="item.itemCode">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-col>
						<el-col :span="2">
							<searchButtonGroup @search="onSubmit" @reset="reset"  />
						</el-col>
					</el-row>



				</el-form>
			</smpPanel>

		<!-- <div class="smp-result smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">需求列表</div>
				
			</div>
			<div class="smp_panel_body"> -->
			<smpPanel title="需求列表">
		
				
				<div class="smp-panel_option">
					<el-button size="mini" plain type="primary" @click="exportSelect"><i class="el-icon-download"></i>
						导出</el-button>
					<el-button size="mini"   @click="exportAll" :disabled="exportAllDisable"><i
							class="el-icon-download"></i>全部导出</el-button>
				</div>
				
				<el-table :data="list" size="mini" stripe style="width: 100%"  @selection-change="selectionChange">
					<el-table-column type="selection" label="" align="center" />
					<el-table-column prop="qmsNo" label="需求号" align="center" />
					<el-table-column prop="qmsName" show-overflow-tooltip label="需求名称" align="center" />
					<el-table-column prop="batchNum" label="批次号" align="center" >
						<template slot-scope="scope">
							{{scope.row.batchNum|dictName("SMP0010")}}
						</template>
					</el-table-column>

					<el-table-column prop="mainSystemNo" label="主系统" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							{{scope.row.mainSystemNo|getSystemName}}
						</template>
					</el-table-column>

					<el-table-column prop="status" label="需求状态" align="center" >
						<template slot-scope="scope">
							{{scope.row.status|dictName("SMP0007")}}
						</template>
					</el-table-column>

					
					<!-- <el-table-column prop="disposeTime" label="受理时间" align="center" />

					<el-table-column prop="prodTime" label="发布时间" align="center" /> -->

					 <el-table-column prop="dealUser" label="开发人员"  align="center">
					<template slot-scope="scope">
						<userCard :user="$store.getters.getUser(scope.row.dealUser)"></userCard>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="开始时间" align="center"  />
					<el-table-column label="操作" align="center" width="200">
						<template slot-scope="scope">
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="handleEdit(scope.$index, scope.row)">详情</el-link> 
								<el-divider direction="vertical"  v-if="vaildPermission('SA0004')"></el-divider>
								<el-link  size="mini" type="primary" :underline="false"  v-if="vaildPermission('SA0004')"
									style="font-size: 12px;"   @click="edit(scope.$index, scope.row)"     >信息补录</el-link> 
										<el-divider direction="vertical"></el-divider>
										<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
												@click="report(scope.$index, scope.row)">需求报告</el-link>
																						
								<!-- <span v-if="vaildPermission('SA0004')" class="smp_split" >|</span> -->
							<!-- <el-link v-if="vaildPermission('SA0004')" size="mini" type="primary" :underline="false"
								style="font-size: 12px;" @click="createFile(scope.$index, scope.row)">esb代码</el-link>
							<span class="smp_split" v-if="vaildPermission('SA0004')" >|</span>
							<el-link v-if="vaildPermission('SA0004')" size="mini" type="primary" :underline="false"
								style="font-size: 12px;" @click="createFile1(scope.$index, scope.row)">oesb代码</el-link> -->
							<!-- <span class="smp_split">|</span>
							<el-link  size="mini" type="primary" :underline="false"
								style="font-size: 12px;" @click="consumeInfo(scope.$index, scope.row)">调用信息</el-link> -->
						</template>
					</el-table-column>

				</el-table>
				<initFile ref="initFile" />

				<div class="smp-pagination" v-show="total>0">
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
						:page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total"
						:current-page="query.pageNum" @current-change="currentChange" @size-change="sizeChange">
					</el-pagination>
				</div>
			</smpPanel>


		<esbRelase ref="esbRelase" />
		<oesbRelase ref="oesbRelase" />
		<consumeInfo ref="consumeInfo" />
		<requirement ref="requirement" @fresh="getList" />
		<reportcom ref="reportcom"></reportcom>
	</div>
</template>

<script>
	"use strict";
	import {
		getRequirementBatchInfoListByPage
	} from '@/api/requirementBatch.js';
	import {
		getConsumeInfoByQmsNo
	} from '@/api/service.js';
	
	import {
		selectByRoleId
	} from '@/api/user.js';
	
	import {
		initFile,
		initOESBFile
	} from '@/api/release.js';
	import esbRelase from './esbRelase.vue';
	import oesbRelase from './oesbRelase.vue';
	import consumeInfo from './consumeInfo.vue';
	import requirement from './requirement.vue';
	import reportcom from './report.vue';
	import {
		report
	} from '@/api/report.js';
	
	import {
		getRequirementInfoList,exportAllRequirement,exportRequirement
	} from '@/api/requirementInfo.js';
	

	export default {

		data() {
			return {
				total: 0,
				list: [],

				query: {
					body: {
						qmsNo: '',
						qmsName: '',
						mainSystemNo: '',
						status: '',
						applyTime: '',
						applyTimeEnd: '',
						dealUser:''
					},
					pageNum: 1,
					pageSize: 5
				},
				qmsLoading: false,
				requirelist:[],
				selections:[],
				devUserList:[],
			};

		},

		created() {
			this.getDevUserList();
			Object.assign(this.query.body,this.$route.query);
			/* Object.assign(this.query,this.$route.query);
			Object.assign(this.query,this.$route.query); */
			if(this.$route.query.pageNum!=undefined){
			this.query.pageNum =this.$route.query.pageNum;
			}
			if(this.$route.query.pageSize!=undefined){
			this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			this.getList();
		},

		components: {
			esbRelase,
			oesbRelase,
			consumeInfo,
			requirement,
			reportcom
		},

		methods: {
			
			
			report(index, row){
				this.$refs.reportcom.ShowDialog(row);
				
				/* report(row).then(res => {
				
					let name = "需求报告.md";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: '需求报告.md', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);
				
					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				}) */
			},
			
			getDevUserList(){
				selectByRoleId({"roleId":"1004"}).then(response => {
								if(response.data.code == "0000"){
									
									this.devUserList = response.data.extend;
								}else{
									this.$message.error(response.data.message);
								}
								});
							
			},
			
			selectionChange(val) {
				this.selections = val;
				//alert(JSON.stringify(val));
			},
			
			exportSelect() {
			
				if (this.selections.length == 0) {
					this.$message({
						duration:5000,
						type: 'warning',
						message: "请选择要导出的需求！"
					});
					return;
				}
			
			
			
				exportRequirement(this.selections).then(res => {
			
					let name = "需求列表.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: '需求列表.xlsx', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);
			
					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},
			
			exportAll() {
				if (this.list.length == 0) {
					this.$message({
						duration:5000,						type: 'warning',
						message: "未查询到任何需求！"
					});
					return;
				}
			
			
			
				exportAllRequirement(this.query).then(res => {
			
					let name = "需求列表.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: '需求列表.xlsx', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);
			
					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},
			
			
			
			/**
			 * 获取需求列表
			 */
			getRequirementList(query) {
			
				if (query != '') {
					this.qmsLoading = true;
					getRequirementInfoList({
						query: query
					}).then(response => {
						this.requirelist = response.data.extend;
						this.qmsLoading = false;
					});
				}
			
			},

			onSubmit() {
				this.getList();
			},
			
			edit(index, row){ //信息补录
				this.$refs.requirement.ShowDialog(row);
			},

			handleEdit(index, row) {
				this.$router.push({
					name: 'requirementDetails',
					query: {
						"qmsNo": row.qmsNo,
						"batchNum": row.batchNum
					}
				})
			},

			createFile(index, row) {
				this.$refs.esbRelase.ShowDialog(row);
			},

			createFile1(index, row) {
				this.$refs.oesbRelase.ShowDialog(row);
			},
			
			consumeInfo(index, row){
				this.$refs.consumeInfo.ShowDialog(row);
			},

			reset() {
				this.query.body = {}
			},

			getList() {
				
				getRequirementBatchInfoListByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					
					let query ={};
					Object.assign(query,this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({query:query})
					/* if(response.data.code == '0000'){
						ththis.$message({
						duration:5000,						type: 'success',
							message: response.data.message
						});	
					}else{
						thithis.$message({
						duration:5000,					type: 'success',
							message: response.data.message
						});
					} */

				}).catch(error => {
					this.$message({
						duration:5000,			type: 'error',
						message: "查询失败！"
					});
				});
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			}
			
			


		}
	}
</script>

<style scoped>
	.requirementListFooter {
		margin-bottom: 20px;
	}

	#requirementListSpan {
		margin-left: 1412px;
	}

	.el-message-box {
		width: 480px;
	}
</style>
